<template>
	<!-- 护理服务-组件 -->
	<view>
		<view class="appointment-b">
			<u--form :model="model" :rules="rules" ref="uForm">
				<view class="panel">
					<view class="label">
						<u-form-item label="服务描述" prop="remarks" labelWidth="120" labelPosition="top">
							<u--textarea v-model="model.remarks" placeholder="请详细描您的服务需求" count
								maxlength="200"></u--textarea>
						</u-form-item>
					</view>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10">
						<image src="@/static/images/upload-default.png" mode="widthFix"
							style="width: 160rpx;height: 160rpx;"></image>
					</u-upload>
				</view>
				<view class="panel">
					<u-form-item label="预约时间" prop="datetime" labelWidth="120" borderBottom
						@click="select.datetime.show=!select.datetime.show">
						<u--input v-model="model.datetime" placeholder="" disabled border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
						<u-datetime-picker :show="select.datetime.show" v-model="time_int" mode="datetime"
							@confirm="select.datetime.confirm($event,'datetime')"></u-datetime-picker>
					</u-form-item>
					<u-form-item label="预约地址" prop="address" labelWidth="120" borderBottom @click="select.address.open">
						<u--input v-model="model.address" placeholder="" disabled border="none"></u--input>
						<u-icon slot="right" name="map" color="#4cd4e6"></u-icon>
					</u-form-item>
					<u-form-item label="价格" prop="price" labelWidth="120" borderBottom>
						<u--input v-model="model.price" placeholder="价格" border="none"></u--input>
						<u-icon slot="right" name=" ">
							<template #before>元</template>
						</u-icon>
					</u-form-item>
					<u-form-item label="发布个数" prop="quantity" labelWidth="120">
						<u--input v-model="model.quantity" placeholder="请填写发布个数" border="none"></u--input>
						<u-icon slot="right" name=" ">
							<template #before>个</template>
						</u-icon>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="commonBtn bottom">
			<view class="left">
				总金额￥<text>59.8</text>
			</view>
			<view class="right" @click="handleClickConfirm">发布</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "nursingService",
		data() {
			return {
				fileList: [],
				config: {},
				model: {
					datetime: " ", //预约时间
					address: " ", //预约地址
					price: " ", //费用
					remarks: "", //备注
				},
				rules: {
					datetime: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					price: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
				},
				select: {
					datetime: {
						show: false,
						formatter: "yyyy-mm-dd hh:MM:ss",
						confirm: (item, key) => {
							this.model[key] = uni.$u.timeFormat(item.value, "yyyy-mm-dd hh:MM:ss");
							this.select[key].show = !this.select[key].show;
						}
					},
					address: {
						show: false,
						open: () => {
							uni.chooseLocation({
								success: (res) => {
									this.model.address = res.name || res.address;
									// this.$emit("confirm", res);
									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
								}
							});
						}
					}
				},
				time_int: Number(new Date())
			};
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm?.setRules(this.rules)
		},
		methods: {
			handleClickConfirm() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
				console.log("confirm");
			},
			// 新增图片
			async afterRead(event) {
				console.log(event, "event");
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.fileList[fileListLen];
					this.fileList.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.appointment-b {
		margin: 0 24rpx;
		
		.panel {
			padding: 0 24rpx 24rpx;
			background-color: #FFF;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 12rpx 0;
		}

		.label {
			::v-deep .u-form-item__body__left__content__label {
				// color:red !important;
				margin-bottom: 24rpx;
				;
			}
		}
	}

	.bottom {
		position: absolute;
		button: 0;
		left: 0;
		height: 136rpx;
		width: 100%;
		background-color: #FFF;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			color: rgba(255, 140, 64, 1);
			font-size: 28rpx;
			font-weight: 400;
			margin-left: 5rpx;

			>text {
				font-size: 40rpx;
				font-weight: 600;
			}
		}

		.right {
			border-radius: 24rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFF;
			width: 288rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $theme-color;
			margin: 24rpx;
		}
	}
</style>